import React, { Component } from 'react'
import { Text, StyleSheet, View , Alert , Button} from 'react-native'

export default class Buttons extends Component {
  createTwoButtonAlert = () => {
    Alert.alert(
      '警告标题',
      '警告内容',
      [
        {text: '确定', onPress: () => console.log('确定被点击了')},
        {text: '取消', onPress: () => console.log('取消被点击了'), style: 'cancel'},
      ]
    )
  }
  createThreeButtonAlert = () => {
    Alert.alert(
      '更新提示',
      '有新版本发布，是否更新？',
      [
        {text: '确定', onPress: () => console.log('确定被点击了')},
        {text: '取消', onPress: () => console.log('取消被点击了'), style: 'cancel'},
        {text: '稍后提醒', onPress: () => console.log('稍后提醒被点击了')},
      ]
    )
  }
  render() {
    return (
      <View style={[styles.container]}>
        <Button 
        title= "alert" 
        onPress={()=> {alert('我是一个按钮')}} 
        />
        <Button title= "Alert.alert" 
        onPress={()=> Alert.alert('系统提示', '我是一个按钮')}
        color={'red'}
        />
        <Button title= "tow Button" 
        onPress={this.createTwoButtonAlert}
        color={'green'}
        />
        <Button title= "Three Button" 
        onPress={this.createThreeButtonAlert}
        color={'tomato'}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
    container:{
        marginTop: 60,
        flex: 1,
        marginLeft: 80,
        marginRight: 80,
        justifyContent: 'space-around',
        alignContent: 'center',
    }
})
